<template>
  <div class="app-container">
    <div>
      <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="info" name="info">
          <keep-alive>
            <div class="inline-box">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="配置名称" required>
                  <el-input v-model="form.name" class="input-reader-name" label="配置名称" />
                </el-form-item>
                <el-form-item label="项目" required>
                  <el-select
                    v-model="form.belong_project"
                    :disabled="operation_type === 1 ? true:false"
                    filterable
                    placeholder="关联项目"
                  >
                    <el-option
                      v-for="(item) in project_options"
                      :key="item.id"
                      :label="item.project_name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="编写人员">
                  <el-input
                    v-model="form.author"
                    class="input-reader-name"
                    label="编写人员"
                    type="textarea"
                  />
                </el-form-item>
              </el-form>
            </div>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="url" name="url">
          <keep-alive>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="base_url" required>
                <el-input v-model="form.config_body.url.base_url" class="input-reader-name" label="base_url" />
              </el-form-item>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="auth_url">
                    <el-input v-model="form.config_body.url.auth_url" label="auth_url" />
                  </el-form-item>
                </el-col>
                <el-col :span="1">
                  <el-tooltip class="item" effect="dark" content="鉴权认证URL，如果为空，默认使用base_url" placement="bottom">
                    <i class="el-icon-info" style="font-size: 20px; font-weight: 500; top: 50%" />
                  </el-tooltip>
                </el-col>
              </el-row>
            </el-form>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="database" name="database">
          <keep-alive>
            <el-form ref="form" :model="form" label-width="120px">
              <el-table
                :data="form.config_body.database"
                style="width: 100%"
              >
                <el-table-column
                  prop="key"
                  label="Key"
                  width="180"
                >
                  <template slot-scope="scope">
                    <div>{{ scope.row.key }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="Type"
                  width="180"
                >
                  <template slot-scope="scope">
                    <div>{{ scope.row.type }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value"
                  label="Value"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.key === 'database_type'">
                      <el-select v-model="scope.row.value" placeholder="请选择">
                        <el-option
                          v-for="items in database_options"
                          :key="items.label"
                          :label="items.label"
                          :value="items.value"
                        />
                      </el-select>
                    </div>
                    <div v-else>
                      <el-input
                        v-model="scope.row.value"
                        class="input-reader-name"
                      />
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="variables" name="variables">
          <keep-alive>
            <el-form ref="form" :model="form" label-width="120px">
              <tableSelect
                v-if="getinfo_flag || !operation_type"
                ref="TableSelect"
                :table-type="'Variables'"
                :datas-text.sync="form.config_body.variables"
                @changeList="changeVariablesLists"
              />
            </el-form>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="text-align: center">
      <br>
      <el-button type="success" @click="onSubmit">保存</el-button>
      <el-button @click="onCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import tableSelect from '@/components/tableSelect'
import { getProjectSumList } from '@/api/project/table'
import { createConfig, getConfig, updateConfig } from '@/api/config/table'

export default {
  components: {
    tableSelect
  },
  data() {
    return {
      operation_type: 0, // 0:create 1:update 2:copy
      configID: '',
      getinfo_flag: false,
      activeTab: 'info',
      form: {
        name: '',
        belong_project: '',
        config_body: {
          url: {
            base_url: '',
            auth_url: ''
          },
          database: [
            {
              key: 'database_type',
              type: 'string',
              value: ''
            },
            {
              key: 'database_host',
              type: 'string',
              value: ''
            },
            {
              key: 'database_name',
              type: 'string',
              value: ''
            },
            {
              key: 'database_user',
              type: 'string',
              value: ''
            },
            {
              key: 'database_password',
              type: 'string',
              value: ''
            },
            {
              key: 'database_port',
              type: 'int',
              value: 3306
            }
          ],
          variables: [
            // {
            //   id: '1',
            //   inputKey: '12',
            //   selectType: 'string',
            //   inputValue: '34'
            // },
          ]
        },
        author: ''
      },
      project_options: {},
      database_options: [ // key类型选项
        {
          value: 'MySQL',
          label: 'MySQL'
        }
      ],
      list_data: []
    }
  },
  created() {
    this.fetchProjectData()
    // 初始数据库类型的默认值
    this.form.config_body.database[0].value = this.database_options[0].value

    this.operation_type = this.$route.query.operation_type || 0
    this.configID = this.$route.query.id || ''
    console.log('Opertaion Type: ' + this.operation_type)
    console.log('configID: ' + this.configID)
    if (this.operation_type !== 0) {
      this.getParams()
    }
  },
  mounted() {
    this.operation_type = this.$route.query.operation_type || 0
    this.configID = this.$route.query.id || ''
    console.log('Opertaion Type: ' + this.operation_type)
    console.log('configID: ' + this.configID)
  },
  methods: {
    fetchProjectData() {
      getProjectSumList().then(response => {
        this.project_options = response.results
      })
    },
    handleClick(tab, event) {
      console.log('Switch Tab to: ' + this.activeTab)
    },
    onSubmit() {
      if (this.operation_type.toString() === '1') {
        updateConfig(this.form).then(response => {
          if (response.status === '000000') return
          this.$message.success('更新成功')
          this.$router.replace(`/config/config_list`)
        })
      } else {
        createConfig(this.form).then(response => {
          console.log(response.msg)
          if (response.status === '000000') return
          this.$message.success('创建成功')
          this.$router.replace(`/config/config_list`)
        })
      }
    },
    onCancel() {
      this.$confirm('此操作将退出编辑, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.replace(`/config/config_list`)
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    },
    getParams() {
      var params = {}
      params['id'] = this.configID

      getConfig(params).then(response => {
        this.form = response.data
        this.getinfo_flag = response.success
      })
    },
    changeVariablesLists: function(obj) {
      this.form.config_body.variables = obj.list
    }
  }
}
</script>

<style scoped lang="scss">
.line {
  text-align: center;
}

.input-reader-name {
  width: 39%;
}

.flex-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;

  .inline-box {
    display: inline-block;
    width: 350px;

    &:last-child {
      width: 500px;
    }
  }

  > span {
    font-size: 30px;
    line-height: 290px;
  }
}

</style>

